<template>
  <div>
    <el-upload
      ref="upload"
      action="#"
      :file-list="fileList"
      :http-request="upimgfn"
      list-type="picture-card"
    >
      <template #default>
        <i class="el-icon-plus"></i>
      </template>
      <template #file="{ file }">
        <div>
          <img alt="" class="el-upload-list__item-thumbnail" :src="file.url" />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>

            <span
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </template>
    </el-upload>
    <el-dialog v-model="dialogVisible">
      <div style="display: flex; justify-content: center">
        <img alt="" :src="dialogImageUrl" width="100%" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import UploadServlet from '@/api/UploadServlet'

  export default {
    props: {
      input: {
        type: Object,
        default: () => {
          return {}
        },
      },
      data: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    emits: ['setimgfn'],
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,

        imglist: [],
        limit: 1,
      }
    },
    computed: {
      fileList() {
        let r = []
        if (this.input.type == 'img') {
          let src = this.data[this.input.value]
          if (src) {
            r.push({ name: src, url: src })
          }
        }

        return r
      },
    },
    watch: {},
    mounted() {
      // console.log(this.$attrs, 'attrs')
    },
    methods: {
      handleRemove(file) {
        this.$emit('setimgfn', { value: '', input: this.input })
        this.$refs.upload.clearFiles()
        console.log(file)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },

      upimgfn(filedata) {
        let file = filedata.file ? filedata.file : filedata

        const isJpgOrPng =
          file.type === 'image/jpeg' || file.type === 'image/png'
        // const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJpgOrPng) {
          this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
          return new Promise((resolve, reject) => {
            reject()
          })
        }
        // upload

        return new Promise((resolve, reject) => {
          UploadServlet(file).then((imgurl) => {
            // resolve(imgurl)
            this.$emit('setimgfn', { value: imgurl, input: this.input })
            reject()
          })
        })
      },
    },
  }
</script>
<style lang="scss" scope>
  .el-overlay .el-dialog .el-dialog__body {
    img {
      width: auto;
      max-width: 100%;
    }
  }
  .el-upload--picture-card {
    width: 120px !important;
    height: 120px;
    line-height: 120px;
  }
  .el-upload-list--picture-card .el-upload-list__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
  }
  .el-upload-list--picture-card .el-upload-list__item div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-overlay .el-dialog .el-dialog__body img {
    // max-width: 120px;
    // max-height: 120px;
  }
</style>
